<template>
  <div>
    <a-drawer
      class="play-drawer"
      placement="bottom"
      height="100vh"
      :closable="false"
      :visible="playvisible"
      @close="onClose"
    >
      <div>
        <img
          :src="musiclist[0].square"
          width="100%"
          style="position:fixed; top:0; left:0; zIndex: -1; opacity: 0.1"
        />
      </div>
      <div style="height: 50px;">
        <a-icon class="comicon" type="down" @click="onClose" />
      </div>
      <a-row
        ><a-col :span="12" :style="{ textAlign: 'center' }">
          <img class="playsquare" :src="musiclist[0].square" alt="icon" />
        </a-col>
        <a-col :span="12"> </a-col>
      </a-row>
    </a-drawer>
    <a-slider
      v-model="musicinfo.currentTime"
      :default-value="100"
      :tip-formatter="null"
      @change="changetime"
    />
    <a-row>
      <a-col :span="7" :style="{ textAlign: 'left' }">
        <slot name="header">
          <div class="icondiv" @click="playdrawer">
            <img class="playdrawericon" :src="musiclist[0].icon" alt="icon" />
            <a-icon class="comicon iconhover" type="double-right" />
          </div>
        </slot>
      </a-col>
      <a-col :span="10" :style="{ textAlign: 'left' }">
        <a-icon :class="loopcon" type="retweet" @click="loopPlay" />
        <a-icon class="comicon" type="step-backward" />
        <a-icon
          class="comicon"
          :type="playtype"
          theme="filled"
          @click="conPlay"
        />
        <a-icon class="comicon" type="step-forward" />
        <a-popover trigger="click">
          <template slot="content">
            <a-row style="width: 300px;">
              <a-col :span="4">
                <a-icon title="静音" class="comicon" type="sound" />
              </a-col>
              <a-col :span="20">
                <a-slider
                  v-model="musicinfo.volume"
                  :default-value="100"
                  :tip-formatter="formatter"
                  @change="changevolume"
                />
              </a-col>
            </a-row>
          </template>
          <a-icon title="音量" class="comicon" type="sound" />
        </a-popover>
      </a-col>
      <a-col :span="7" :style="{ textAlign: 'right' }">
        <a-popover trigger="click">
          <template slot="content">
            <div style="width: 300px;">
              <a-slider
                v-model="musicinfo.playbackRate"
                @change="changeBackRate"
              />
            </div>
          </template>
          <span title="倍速" class="comicon">倍速</span>
        </a-popover>
        <span>
          {{ musicplay.currentTime | secondToMin }}/{{
            musicplay.duration | secondToMin
          }}</span
        >
        <slot name="footer"></slot>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  filters: {
    secondToMin(value) {
      if (isNaN(Number(value))) {
        return '00:00'
      }
      value = Math.floor(value)
      const second = value % 60
      const min = Math.floor(value / 60)
      return (
        String(min).padStart(2, '0') + ':' + String(second).padStart(2, '0')
      )
    }
  },
  data() {
    return {
      playvisible: true,
      controlplay: false,
      playtype: 'play-circle',
      musiclist: [
        {
          src: '/audio/1965.mp3',
          icon: '/images/play-icon/1.jpg',
          square: '/images/square/1.jpg'
        }
      ],
      musicplay: '',
      musicinfo: {
        currentTime: 0,
        defaultPlaybackRate: 100,
        volume: 100,
        loop: false,
        defaultMuted: false
      },
      loopcon: 'comicon'
    }
  },
  mounted() {
    this.defaultmusic()
  },
  methods: {
    playdrawer() {
      this.playvisible = true
    },
    onClose() {
      this.playvisible = false
    },
    formatter(value) {
      return `${value}%`
    },
    changeBackRate() {
      this.musicplay.playbackRate = this.musicinfo.playbackRate * 0.02
    },
    changevolume() {
      this.musicplay.volume = this.musicinfo.volume * 0.01
    },
    changetime() {
      this.musicplay.currentTime =
        this.musicplay.duration * this.musicinfo.currentTime * 0.01
    },
    timeupdate() {
      this.musicinfo.currentTime =
        (this.musicplay.currentTime * 100) / this.musicplay.duration
    },
    loopPlay() {
      if (this.loopcon === 'comicon') {
        this.loopcon = 'activeicon'
        this.musicplay.loop = true
      } else {
        this.loopcon = 'comicon'
        this.musicplay.loop = false
      }
    },
    conPlay() {
      if (this.playtype === 'play-circle') {
        this.playtype = 'pause-circle'
      } else {
        this.playtype = 'play-circle'
      }
      this.controlplay = !this.controlplay
      if (this.controlplay === true) {
        this.musicplay.addEventListener('timeupdate', this.timeupdate)
        this.musicplay.play()
      } else {
        this.musicplay.pause()
        this.musicinfo.removeEventListener(' timeupdate', this.timeupdate)
      }
    },
    defaultmusic() {
      this.musicplay = new Audio()
      this.musicplay.src = this.musiclist[0].src
    }
  }
}
</script>
<style scoped>
.activeicon {
  font-size: 20px;
  line-height: 5px;
  padding: 0 5px;
  cursor: pointer;
  color: #1ece9d;
}
.icondiv {
  text-align: center;
  height: 50px;
  width: 50px;
}
.playdrawericon {
  cursor: pointer;
  height: 50px;
  width: 50px;
  border-radius: 5px;
}
.iconhover {
  background: black;
  color: white;
  position: relative;
  opacity: 0;
  top: -67px;
  line-height: 2;
  border-radius: 5px;
  /*text-align: center;*/
  height: 50px;
  width: 50px;
  transition: 0.5s ease;
  transform: rotate(-90deg);
}
.icondiv:hover .iconhover {
  /*display: inline;*/
  opacity: 0.5;
}
.playsquare {
  height: 400px;
  widht: 400px;
  border-radius: 200px;
}
/*.play-drawer {
  background: url('images/square/1.jpg') no-repeat fixed center;
}*/
</style>
